<template>
  <div
    class="property-home"
    :style="{
      backgroundColor: themeStyle[theme].backgroundColor1,
      borderLeft: `1px solid ${themeStyle[theme].borderColor1}`
    }"
  >
    <div
      class="property-home-title"
      :style="{
        backgroundColor: themeStyle[theme].backgroundColor2,
        color: themeStyle[theme].textColor3
      }"
    >
      <span>属性</span>
      <div class="icon-group">
        <div class="pushpin" :class="isPushpin ? 'pushpinActive' : ''" @click="switchPushpin">
          <svg-icon
            name="fixedNail"
            size="1em"
            :color="themeStyle[theme].textColor1"
            class="icon"
          ></svg-icon>
        </div>

        <svg-icon
          name="funClose"
          size="0.9em"
          :color="themeStyle[theme].textColor1"
          class="icon"
          @click="closeAttribute"
        ></svg-icon>
      </div>
    </div>

    <template v-if="attributeData.type === 'canvas'">
      <CanvasProperty :data="attributeData.data" />
    </template>
    <template v-if="attributeData.type === 'node'">
      <NodeProTem :data="attributeData.data" />
    </template>
    <template v-if="attributeData.type === 'edge'">
      <EdgeProTem :data="attributeData.data" />
    </template>
    <template v-if="attributeData.type === 'conveyor'">
      <ConveyorProperty :data="attributeData.data" />
    </template>
    <template v-if="attributeData.type === 'road'">
      <RoadProperty :data="attributeData.data" />
    </template>
    <template v-if="attributeData.type === 'bulkNode'">
      <BulkNode :data="attributeData.data" />
    </template>
    <template v-if="attributeData.type === 'freeEdit'">
      <FreeEdit :data="attributeData.data" />
    </template>
    <template v-if="attributeData.type === 'plaintext'">
      <Plaintext :data="attributeData.data" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import { onMounted, watch, ref } from 'vue'
import CanvasProperty from './canvasPro/CanvasProperty.vue'
import NodeProTem from './nodePro/NodeProTem.vue'
import ConveyorProperty from './conveyorPro/ConveyorProperty.vue'
import BulkNode from './nodePro/BulkNode.vue'
import FreeEdit from './nodePro/FreeEdit.vue'
import EdgeProTem from './edgePro/EdgeProTem.vue'
import RoadProperty from './roadPro/RoadProperty.vue'
import Plaintext from './nodePro/Plaintext.vue'

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

interface type {
  title: string
  id: string
  type:
    | 'canvas'
    | 'node'
    | 'edge'
    | 'conveyor'
    | 'road'
    | 'bulkNode'
    | 'freeEdit'
    | 'plaintext'
    | null
  data: any
}
const attributeData = ref<type>({
  title: '模型属性',
  id: '',
  type: null,
  data: {}
})

//是否开启固钉
const isPushpin = ref(false)

onMounted(() => {
  //监听主进程的属性栏数据处理事件
  window.electron.ipcRenderer.on('attributeWindowData', (e, data) => {
    switchAttribute(data)
  })
})

watch(
  () => theme.value,
  () => {
    const hoverColor = themeStyle.value[theme.value].btnHoverColor2
    //设置--btnHoverColor
    attributeHomeRef.value?.style.setProperty('--btnHoverColor', hoverColor)
  }
)

//是否开启固钉
const switchPushpin = (e: MouseEvent): void => {
  isPushpin.value = !isPushpin.value

  //组织冒泡和默认行为
  e.stopPropagation()
  e.preventDefault()
}

//在这里判断是否需要切换数据或是隐藏
const switchAttribute = (data: any): void => {
  console.log(data)
  if (isPushpin.value) {
    //这里是固钉状态，然后判断传进来的type如果是null
    if (data.type === null && data.id === attributeData.value.id) {
      attributeData.value = data
    }
  } else {
    attributeData.value = data
  }
}

const attributeHomeRef = ref<HTMLDivElement | null>(null)

const closeAttribute = (): void => {
  useStyleStore().resizeAttribute(0)
}
</script>

<style scoped lang="scss">
.property-home {
  width: 100%;
  height: 100%;
  font-size: $font-size-small;

  .property-home-title {
    padding: 0px 5px;
    height: 25px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    text-wrap: nowrap;

    .icon-group {
      display: flex;
      justify-content: center;
      align-items: center;
      .pushpin {
        border: 0px solid #a4d3ff;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease-in-out;
      }
      .pushpinActive {
        border: 1px solid #a4d3ff;
        background-color: #cce6ff;
      }
      .icon {
        width: 25px;
        cursor: pointer;
      }
    }
  }
}
</style>
